<template>
  <div>
    <div class="before">

    </div>
    <p class="back">
      <router-link to='/'>《返回</router-link>
    </p>
    <van-form validate-first @failed="onFailed">
      <!-- 通过 pattern 进行正则校验 -->
      <van-field v-model="value1" label="账户" name="pattern" placeholder="输入用户名" />
      <!-- 通过 validator 进行函数校验 -->
      <van-field v-model="value2" label="密码" name="validator" type="password" placeholder="输入密码"
        :rules="[{ validator, message: '账户或密码错误' }]" />
      <div style="margin: 16px;" :class="!isShow?'events':''">
        <van-button round block native-type="submit" style="background:black;color:#fff" 
          @click="login">
          登录
        </van-button>
      </div>
      <p class="title">若没有账号，请
        <router-link to="regin">
          立即注册
        </router-link>
      </p>
    </van-form>
  </div>
</template>

<script>
  import {
    Form
  } from "vant";
  import {
    Toast
  } from 'vant';

  export default {
    data() {
      return {
        value1: '',
        value2: '',
        value3: '',
        idx: -1,
        isShow: false,
      };
    },
    computed: {
      users() {
        return this.$store.state.user.user
      }
    },
    created() {
      console.log(this.users)
    },
    methods: {
      // 校验函数返回 true 表示校验通过，false 表示不通过
      // isName(val) {
      //   let count=false;
      //   for(var i=0;i<this.users.length;i++){
      //     if(this.value1==this.users[i].username){
      //       count=true;
      //       this.idx=i;
      //       break;
      //     }
      //   }
      //   return count;
      // },
      validator(val) {
        let count = false;
        for (var i = 0; i < this.users.length; i++) {
          if (this.value1 == this.users[i].username && this.value2 == this.users[i].password) {
            count = true
            this.idx = i;
            this.isShow = true;
            break;
          }
        }
        return count
      },
      test() {
        console.log(1)
        this.$router.push({
          path: "/home/user"

        })
      },
      login() {
        this.$store.commit('user/onLine', this.idx)
        this.$router.push({
          path:'/'
        })
      },
      onFailed(errorInfo) {
        console.log('failed', errorInfo);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .before {
    height: 60px;
    width: 100%;
  }

  .title {
    color: black;
    text-align: center;
  }

  .title a {
    color: blue;

  }

  .back {
    font-size: 15px;
    padding-left: 5px;
    line-height: 50px;

    a {
      color: black;
    }
  }

  .events {
    pointer-events: none;
  }
</style>